<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
   <el-form  ref="form"  label-width="80px" :inline="true" >
   <el-form-item label="一级分类"  >
       <el-select  placeholder="一级分类"  v-model="useCategoryStore.c1Id"  @change="getC2Arr" :disabled="scene==0?false:true">
       <el-option v-for="(item,index) in useCategoryStore.c1Arr" :key="index" :value="item.id" :label="item.name">
       </el-option>
       </el-select>
   </el-form-item>
   <el-form-item label="二级分类"  >
       <el-select  placeholder="二级分类"  v-model="useCategoryStore.c2Id" @change="getC3Arr" :disabled="scene==0?false:true">
       <el-option v-for="(item,index) in useCategoryStore.c2Arr" :key="index" :value="item.id" :label="item.name">
       </el-option>
       </el-select>
   </el-form-item>
   <el-form-item label="三级分类"  >
       <el-select  placeholder="三级分类"  v-model="useCategoryStore.c3Id" :disabled="scene==0?false:true">
       <el-option v-for="(item,index) in useCategoryStore.c3Arr" :key="index" :label="item.name" :value="item.id">
       </el-option>
       </el-select>
   </el-form-item>
 
   </el-form>
   
  </el-card>
  
</template>

<script setup lang="ts">
import pinia from '@/stores/index';
import useCategory from '@/stores/category.ts';

import {onMounted} from 'vue'
const useCategoryStore =useCategory(pinia)
onMounted(()=>{
    useCategoryStore.c2Id=''
    useCategoryStore.c3Id=''
    useCategoryStore.c1Id=''
    useCategoryStore.c1Arr=[]
    useCategoryStore.c2Arr=[]
    useCategoryStore.c3Arr=[]
    
    
    getC1Arr()

})

// 获取c1列表
const getC1Arr=()=>{
    useCategoryStore.reqc1Arr()
}


// 获取c2列表
const  getC2Arr=()=>{
 
    
    useCategoryStore.reqc2Arr()
}
// 获取c3列表
const getC3Arr=()=>{

    useCategoryStore.reqc3Arr()
}
defineProps(['scene'])


</script>

<style scoped>

</style>